<template>
	<div class="tab">
		<router-link tag="div" class="item" :to="{name: 'bid-home'}">
			<div class="image image1"></div>
			<span class="tab-link">首页</span>
		</router-link>
		<router-link tag="div" class="item" :to="{name: 'bid-meList'}">
			<div class="image image2"></div>
			<span class="tab-link">个人竞价</span>
		</router-link>
		<router-link tag="div" class="item" :to="{name: 'bid-user'}">
			<div class="image image3"></div>
			<span class="tab-link">我的</span>
		</router-link>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	
	    }
	  }
	}
</script>

<style scoped>
	.tab {
		height: 0.49rem;
		line-height: 0.49rem;
		font-size: 0.12rem;
		color: #000;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		border-top: 1px solid #fafafa;
	}
	.item{
		flex: 1;
		height: 44px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.image{
		width: 20px;
		height: 24px;
		margin-top: 0.05rem;
	}
	.image1 {
		background: url(../../../assets/image/v1/bid/home1@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	.image2 {
		background: url(../../../assets/image/v1/bid/bid1@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	.image3 {
		background: url(../../../assets/image/v1/bid/me1@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	.router-link-active .image1 {
		background: url(../../../assets/image/v1/bid/home2@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	.router-link-active .image2 {
		background: url(../../../assets/image/v1/bid/bid2@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	.router-link-active .image3 {
		background: url(../../../assets/image/v1/bid/me2@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	.tab-link {
		padding: 0.06rem 0 0.05rem 0;
	}
	.router-link-active .tab-link {
		color: #4085ff;
	}
</style>